{% extends "base.html" %} {% block main %}

<script>

    function addToUserList(list, user) {
        var i;
        for (i = 0; i < list.length; i++) {
            if (list[i].id === user.id) {
                return;
            }
        }
        list.push(user);
    }

    function removeFromUserList(list, user) {
        var i, target = -1;
        for (i = 0; i < list.length; i++) {
            if (list[i].id === user.id) {
                target = i;
                break;
            }
        }
        if (target >= 0) {
            list.splice(target, 1);
        }
    }

    function addMessage(list, msg) {
        list.push(msg);
        $('#message-list').parent().animate({
            scrollTop: $('#message-list').height()
        }, 1000);
    }

    $(function () {
        var vmMessageList = new Vue({
            el: '#message-list',
            data: {
                messages: []
            }
        });
        var vmUserList = new Vue({
            el: '#user-list',
            data: {
                users: []
            }
        });

        var ws = new WebSocket('ws://localhost:3000/ws/chat');  // 构造

        ws.onmessage = function (event) {   // 接收消息
            var data = event.data;
            console.log(data, 78978);
            var msg = JSON.parse(data);
            if (msg.type === 'list') {
                vmUserList.users = msg.data;
            } else if (msg.type === 'join') {
                addToUserList(vmUserList.users, msg.user);
                addMessage(vmMessageList.messages, msg);
            } else if (msg.type === 'left') {
                removeFromUserList(vmUserList.users, msg.user);
                addMessage(vmMessageList.messages, msg);
            } else if (msg.type === 'chat') {
                addMessage(vmMessageList.messages, msg);
            }
        };

        ws.onclose = function (evt) {  // 关闭
            console.log('[closed] ' + evt.code);
            var input = $('#form-chat').find('input[type=text]');
            input.attr('placeholder', 'WebSocket disconnected.');
            input.attr('disabled', 'disabled');
            $('#form-chat').find('button').attr('disabled', 'disabled');
        };

        ws.onerror = function (code, msg) {
            console.log('[ERROR] ' + code + ': ' + msg);
        };

        $('#form-chat').submit(function (e) {
            e.preventDefault();
            var input = $(this).find('input[type=text]');
            var text = input.val().trim();
            console.log('[chat] ' + text);
            if (text) {
                input.val('');
                ws.send(text);
            }
        });
    });
</script>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="glyphicon glyphicon-th-list"></span> Room</h3>
                </div>
                <div class="panel-body">
                    <div style="height:400px; overflow-x:hidden; overflow-y:scroll;">
                        <div id="message-list">
                            <div style="margin-bottom:25px;" v-for="msg in messages">
                                <div v-if="msg.type === 'join' || msg.type === 'left'">
                                    <div class="media-left">
                                        <img class="media-object" style="width:20px; height:20px;" v-bind:src="'/static/images/' + msg.user.image + '.png'">
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading" v-text="msg.data"></h4>
                                    </div>
                                </div>
                                <div v-if="msg.type === 'chat'">
                                    <div class="media">
                                        <div class="media-left">
                                            <img class="media-object" style="width:48px; height:48px;" v-bind:src="'/static/images/' + msg.user.image + '.png'">
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading" v-text="msg.user.name"></h4>
                                            <span v-text="msg.data"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <form id="form-chat" action="#0">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="A good day, isn't it?">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="submit">Go</button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="glyphicon glyphicon-user"></span> Users</h3>
                </div>
                <div class="panel-body">
                    <div style="height:434px; overflow-x:hidden; overflow-y:scroll;">
                        <div id="user-list">
                            <div class="media" v-for="user in users">
                                <div class="media-left">
                                    <img class="media-object" style="width:20px; height:20px;" v-bind:src="'/static/images/' + user.image + '.png'">
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading" v-text="user.name + ' (' + user.id + ')'"></h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}